<template>
  <!--  <div>-->
  <div class="custom-wrap body-bgcolor">
    <i class="lt-box-border-bg box-border-bg"></i>
    <i class="rt-box-border-bg box-border-bg"></i>
    <div class="custom-wrap">
      <el-row class="search-records">
        <el-col :span="20" class="timeline">
          <div style="display:flex;">
            <div v-for="item in timeLineList" :key="item.id" style="flex:1; display:flex; flex-direction:column;">
              <div style="flex:1; display:flex" class="timeline-content">
                <div class="dot" @click="changeActive(item.id)" :class="{'active-dot': item.id === timeIndex}"></div>
                <div class="timeline-title" :class="{'left10': item.title === '最近30天'}">{{ item.title }}</div>
                <div class="item" v-show="item.isShow"></div>
              </div>
              <div class="item_bottom"></div>
            </div>
          </div>
          <!--        </el-row>-->
        </el-col>
      </el-row>
    </div>
    <i class="lb-box-border-bg box-border-bg"></i>
    <i class="rb-box-border-bg box-border-bg"></i>
  </div>
  <!--  </div>-->
</template>

<script>
export default {
  name: "TimeLine",
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      },
      timeIndex: 0, // 时间类型 0 全部或自定义 1今天 2 昨天 3本周 4 本月 5 近30天 6今年 7季度
      timeLineList: [{
        id: 0,
        title: '申请',
        isShow: true
      }, {
        id: 1,
        title: '选图选工匠',
        isShow: true
      }, {
        id: 2,
        title: '签订合同',
        isShow: true
      }, {
        id: 3,
        title: '竣工验收',
        isShow: true
      }],
      dateValue: '',
    }
  },
  methods: {
    // 选择时间轴时间点
    changeActive (index) {
      this.timeIndex = index;
      this.dateValue = ''
      this.$emit('timetable', this.timeIndex)
    },
    // 选择日期
    selectDate () {
    },
    // 点击确定按钮查询
    searchRecord () {
      this.timeIndex = 0 // 将类型设为自定义
      if (this.dateValue === "" || this.dateValue === null || this.dateValue === undefined) {
        this.dateValue = []
      }
      this.$emit('customtable', this.timeIndex, this.dateValue)
    },
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor .el-range-separator {
  width: 6%;
}

/*时间轴*/
.custom-wrap {
  position: relative;
  height: 70px;
  margin-top: 5px;
  margin-bottom: 10px;
  color: black;

  .timeline {
    height: 100%;
    margin-left: 20px;
    //margin-top: 40px;
    padding-top: 10px;

    .timeline-content {
      position: relative;

      .timeline-title {
        position: absolute;
        left: -2px;
        top: 32px;
        //text-align: left;
        //margin-left: 50px;
      }

      .left10 {
        left: -15px;
      }

      .dot {
        border: 2px solid #dcdfe6;
        width: 20px;
        height: 20px;
        border-radius: 30px;
        background: white;
        margin: 6px 0;
        box-sizing: border-box;
        cursor: pointer;
      }
    }

    .item {
      flex: 1;
      border-bottom: 4px solid #dcdfe6;
      margin-bottom: 15px;
      box-sizing: border-box;
    }

    .item_bottom {
      flex: 1;
      text-align: center;
      height: 15px;
      margin-top: 7px;
      font-size: 14px;
    }

    .active-dot {
      width: 25px !important;
      height: 25px !important;
      background-color: blue !important;
      //border: 5px solid #67C23A;
      //margin-top: 2px;
      margin-top: 2px !important;
      box-sizing: content-box;
      cursor: pointer;
    }

    .active-dot + .item {
      margin-bottom: 16px;
    }
  }
  .custom-search {
    margin-top: 26px;

    span {
      line-height: 40px;
      margin-right: 20px;
    }

    .search-btn {
      width: 60px;
      margin-left: 20px;
      padding-left: 10px;
    }
  }
}
</style>

</style>

